<template>
	<info-list :dataList="dataList" jumpAddress="river-info"></info-list>
</template>

<script>
	import infoList from "@/components/info-list/info-list.vue";
	export default {
		// 券核销记录
		name: "TicketsVerify",
		components: {
			infoList
		},
		data: () => ({
			dataList: [], //用于展示的数据表
			page: 1, //当前页面
			total: 0 ,//数据总数
		}),
		onLoad() {},
		onShow() {
			this.$_getDataList();
		},
		methods: {
			goDetail(e) {
				let detail = {
					createTime: e.createTime,
					rivername: e.rivername,
					rivertype: e.rivertype,
					riverlenth: e.riverlenth,
					riverarea: e.riverarea,
					headstream: e.headstream,
					riverlevel: e.riverlevel,
					opencoordinate: e.opencoordinate,
					endcoordinate: e.endcoordinate,
					desc: e.desc
				}
				uni.navigateTo({
					url: "river-info?detailDate=" + encodeURIComponent(JSON.stringify(
						detail))
				})
			},
			// 滚动列表
			scrolltolower() {
				if (this.dataList.length >= this.total) return;
				this.$_getDataList({
					notInit: true,
					hideT: true
				});
			},
			// 获取数据列表
			async $_getDataList({
				notInit,
				hideT
			} = {}) {
				let data1 = [{
					createTime:{name:"创建时间",value: '2019-12-22'},
					rivername: {name:"河道名",value: '湘江'},
					rivertype: {name:"河道类型",value: '河流'},
					riverlenth: {name:"河道长度",value: '12321'},
					riverarea: {name:"河道面积",value: '323'},
					headstream: {name:"发源地",value: "长江"},
					riverlevel: {name:"河道级别",value: "省级河道"},
					opencoordinate: {name:"开始经纬度",value: "123,333"},
					endcoordinate: {name:"结束经纬度",value: "344,45"},
					desc: {name:"描述",value: "湘江，长江流域洞庭湖水系。是湖南省最大河流。"}
				}]
				this.dataList = this.dataList.concat(data1)
				this.dataList = this.dataList.concat(data1)
				this.dataList = this.dataList.concat(data1)
				this.dataList = this.dataList.concat(data1)
			}
		}
	}
</script>
<style>
	page {
		background: #F4F5F6;
	}
</style>
<style lang="scss" scoped>
	.manage {
		@include flexLine;
		height: 60upx;

		&_info {
			padding: 16upx 0 16upx 30upx;
			display: inline-block;
			font-size: 26upx;
			color: #999;
			position: absolute;
			right: 40px;
		}

		&_arrow {
			display: inline-block;
			padding: 20upx 0 16upx 30upx;
			position: absolute;
			right: 30px;
			margin-left: 14upx;
			width: 10upx;
			height: 18upx;
		}
	}

	.verify {
		// background: #EEEEEE;
		background: #F5F5F5;

		&_header {
			align-items: center;
			width: 702upx;
			height: 110upx;
			display: flex;
			background: #fff;
			padding: 0 24upx;
			font-size: 28upx;
			color: #333;
			z-index: 2;

			&_input {
				display: flex;
				align-items: center;
				width: 100%;
				line-height: 70upx;
				padding: 10upx 20upx;
				background: #F5F5F5;
				border-radius: 38upx;

				&_icon {
					width: 40upx;
					height: 36upx;
				}

				&_keywrod {
					width: 100%;
					height: 59upx;
					padding-left: 30upx;
					@include fzc(28upx, #333)
				}

				&_del {
					width: 60upx;
					height: 52upx;
					z-index: 10;
				}
			}

			&_right {
				margin-top: 24upx;
				margin-left: 24upx;
				margin-right: 6upx;
				width: 58upx;
				height: 43upx;
				line-height: 43upx;
				float: right;
			}

		}

		&_scroll {
			position: absolute;
			top: 110upx;
			left: 0;
			right: 0;
			bottom: 0;

			&_list {
				padding-bottom: 40upx;

				&_item {
					overflow: hidden;
					margin: 24upx;
					background: #FFFFFF;
					border-radius: 24upx;

					&-time {
						@include fzc;
						padding-left: 26upx;
						line-height: 60upx;
					}

					&_detail {
						border-top: #EEEEEE solid 1upx;

						margin: 26upx {
							top: 0;
							bottom: 10upx;
						}

						;

						&-name {
							@include fzc;
							font-weight: bold;
							line-height: 60upx;
						}

						&_info {
							@include flexLine;
							justify-content: space-between;
							height: 50upx;
							align-items: center;

							&-desc {
								@include fzc;
							}

							&-info {
								@include fzc;
							}

							&-info2 {
								@include fzc($c: #FF9800);
							}
						}
					}
				}
			}

			&_nodata {
				overflow: hidden;
				text-align: center;

				&-img {
					margin: 150upx 0 10upx;
					width: 526upx;
					height: 315upx;
				}

				&-name {
					@include fzc($c: #999);
				}
			}
		}
	}
</style>
